<template>
    <div>
        <!-- 个人中心 -->
        <panel title="管理员信息">

            <div class="admin">
                <div class="peronal-text"> 管理员ID:{{ accountInfo.id }}</div>
                <el-divider></el-divider>

                <div class="peronal-text"> 账号:{{ accountInfo.account }}</div>
                <el-divider></el-divider>

                <div class="peronal-text"> 用户组:{{ accountInfo.userGroup }}</div>
                <el-divider></el-divider>

                <div class="peronal-text">创建时间: {{ formatData(accountInfo.ctime) }}</div>
                <el-divider></el-divider>

                <div class="peronal-img"> 管理员头像：
                    <!-- <img :src="accountInfo.imgUrl" alt="" /> -->
                    <!-- {{ accountInfo.imgUrl }} -->
                    <!-- class="avatar-uploader"
                    action="http://1.15.179.44:3001/users/avatar_upload"
                    :on-success="success" -->
                    <!-- <el-upload class="avatar-uploader" action="http://1.15.179.44:3001/users/avatar_upload"
                        :on-success="success">

                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> -->
                    <el-upload class="avatar-uploader" action="http://127.0.0.1:3001/users/avatar_upload"
                        :on-success="success" :show-file-list="false">
                        <!-- <img :src="accountInfo.imgUrl" alt="" /> -->
                        <img :src="BASE_URL + accountInfo.imgUrl" class="avatar">
                        <!-- <i class="el-icon-plus avatar-uploader-icon"></i> -->
                    </el-upload>
                </div>

            </div>

        </panel>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import { usersInfoReq, avatareditReq } from '@/api/account.api'
import { BASE_URL } from '@/utils/common'
// import { type } from 'os'
// import axios from '@/utils/request'
export default {
    data() {
        return {
            BASE_URL,
            // imageUrl: '',
            accountInfo: {},
            imgformat: ['image/jpeg', 'image/jpg', 'image/png']
        }
    },
    async created() {
        const res = await usersInfoReq()
        console.log(res)
        this.accountInfo = res.data
    },
    methods: {
        formatData(time) {
            return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        },
        // 图片  :before-upload="beforeup"
        // beforeup(file) {
        //     if (this.imgformat.includes(type) && file.size / 1024 <= 20) {
        //         return true
        //     }
        // },
        success(response) {
            // console.log(response);
            // this.imageUrl = URL.createObjectURL(file.raw);
            let imgUrl = response.imgUrl.split('/').pop()
            avatareditReq(imgUrl).then((res) => {
                // console.log(res, '--------');

                this.$bus.$emit('imglu', response.imgUrl)
                usersInfoReq().then((res) => {
                    this.accountInfo = res.data
                })
            })

        }
    }

}
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}



.admin {
    .el-divider--horizontal {
        margin: 24px 0;
    }
}

.peronal-img {
    display: flex;
    align-items: center;

    // height: 50px;
    // line-height: 50px;
    img {
        width: 100px;
        height: 100px;
    }
}
</style>